@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.content-sidebar {

	&.main {
		margin-top: 32px;
		&.is-wide-layout {
			@include break-small {
				padding: 0;
			}
		}
	}

	grid-row: 4 / span 1;

	@include break-xlarge {
		&.main {
			margin-top: 40px;
		}
		grid-column: 1 / span 12;
		display: grid;
		grid-template-columns: repeat(12, [col-start] minmax(0, 1fr));
		grid-gap: 32px;
		grid-column-gap: 24px;
	}
	&__main-content {
		@include break-xlarge {
			grid-column: 1 / span 8;
		}
	}

	&__right-sidebar {
		@include break-xlarge {
			grid-column: 9 / span 4;
		}
	}
}

header.current-section {
	padding: 0 16px;
}
